<template>
  <div class="integral">
    <secondTopPanel>
      <div slot='title'>安全币排名</div>
    </secondTopPanel>
    <div class="mineRank">
			<div class="rank-type">
				<div class="rank-type-btn" :class="[{'active': type=='1'}]" @click="rankClick('1')">集团</div>
				<div class="rank-type-btn" :class="[{'active': type=='2'}]" @click="rankClick('2')">公司</div>
				<div class="rank-type-btn" :class="[{'active': type=='3'}]" @click="rankClick('3')">部门</div>
			</div>
			<div>
				<span>我的名次：</span><span class="mineNum">第{{mine.rownum}}名</span>
			</div>
		</div>
    <div class="t-title">
      <div class="t-th">排名</div>
      <div class="t-th">姓名</div>
      <div class="t-th">安全币</div>
    </div>
    <zPaging class="zPaging" :default-page-size="10" :fixed='false' height='100%' ref="paging" @query="queryList" v-model="rankList" :delay='200' :refresher-end-bounce-enabled="false">
      <div class="t-table">
        <div class="t-tr" v-for="(item,index) in rankList " :key="'rankList'+index">
          <div class="t-td">{{ item.rownum>2?item.rownum :''}}<img class="t-img" v-if="item.rownum<3" :src="firstImg[item.rownum-1]" />
          </div>
          <div class="t-td">{{ item.nick_name }}</div>
          <div class="t-td">{{ item.points }}</div>
        </div>
      </div>
    </zPaging>
  </div>
</template>

<script>
import { userPointsList, pointsRanking } from "@/api/integral.js";
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'

export default {
  name: 'integral',
  components: { zPaging, secondTopPanel },
  mixins: [ZPagingMixin],
  data () {
    return {
      mine: {},
			type: "1",
      firstImg: [require("@/static/wczd/first.png"), require("@/static/wczd/second.png"), require("@/static/wczd/third.png")],
      rankList: []
    }
  },
  methods: {
		rankClick(type){
			this.type = type
			
			uni.showLoading({
			  title: '加载中'
			});
			// this.$refs.paging.complete(this.rankList);
			// uni.hideLoading();
			pointsRanking({}, { pageNum: 1, pageSize: 10,type: this.type }).then(res => {
			  this.mine = res.mine
				this.$refs.paging.reload()
			  // this.$refs.paging.complete(res.ranking);
			  uni.hideLoading();
			})
		},
    // z-paging 查询方法
    queryList (pageNo, pageSize) {
      uni.showLoading({
        title: '加载中'
      });
      // this.$refs.paging.complete(this.rankList);
      // uni.hideLoading();
      pointsRanking({}, { pageNum: pageNo, pageSize: pageSize,type: this.type }).then(res => {
        this.mine = res.mine
        this.$refs.paging.complete(res.ranking);
        uni.hideLoading();
      })
    },
  },
}
</script>

<style scoped lang="scss">
.integral {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.globalTitle {
  .choose {
    font-size: 32upx;
    font-weight: bold;
    padding: 20upx;
    margin: auto;
    width: 700upx;
    margin-top: 20upx;
    height: 80upx;
    display: flex;
    justify-content: space-evenly;
  }
}
.t-title {
  padding: 0 60upx 0 60upx;
  display: flex;
  justify-content: space-evenly;
  .t-td,
  .t-th {
    font-size: 30upx;
    font-weight: bold;
    width: 33%;
    height: 60upx;
    line-height: 60upx;
    margin: 20upx 0;
    text-align: center;
    &:nth-child(1) {
      // padding-right: 20%;
      text-align: left;
    }
    &:nth-child(3) {
      text-align: right;
    }
  }
}
.mineRank {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 100upx 40upx 0 60upx;
  border-bottom: 4px solid #f5f5f5;
  .mineNum {
    font-size: 40upx;
  }
}
.zPaging {
  background-color: #fff;
  flex: 1;
  height: 0;
  .t-table {
    padding: 0 60upx;
    width: 100%;
    .t-tr {
      display: flex;
      justify-content: space-evenly;
      border-bottom: 1px solid #f5f5f5;
      .t-img {
        height: 60upx;
      }
      .t-td,
      .t-th {
        width: 33%;
        min-height: 60upx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20upx 0;
        text-align: center;
        &:nth-child(1) {
          padding-right: 20%;
        }
        &:nth-child(3) {
          padding-left: 20%;
        }
      }
    }
  }
}
.rank-type{
	display: flex;
	
	.rank-type-btn{
		padding: 5upx 30upx;
		font-size: 15px;
		
		&.active{
			color: white;
			background: #00a2ff;
		}
	}
}
</style>
